import React, { Component } from 'react'
// 引入页面组件
import Home from '../router-view2/Home';
import Category from '../router-view2/Category';
import Car from '../router-view2/Car';
import Mine from '../router-view2/Mine';

import { Route, Redirect, Switch, withRouter } from 'react-router-dom'
class Index extends Component {
    render() {
        return (
            <>
                {/* 组件的渲染方式1 优点:最常用一种方式, 并且该Home 组件有props属性*/}
                <Route path='/home' component={Home}></Route>
                {/* 组件渲染方式2:  component函数形式:不常用. props需要传递. 否则丢失*/}
                <Route path='/category' component={(props) => <Category {...props} />}></Route>
                {/* 组件渲染方式3: */}
                <Route path='/car' render={(props) => <Car {...props}></Car>}></Route>
                {/* 组件渲染方式4:
                    注意: 当children 为函数形式,会都是props, 需要传递props, 
                    // 当路由规则没有Switch 组件包裹, 会导致无论什么path, 都会匹配该组件
                    // 当不匹配props上的match 属性为null 
                    // 当匹配是, props 上的match 属性为一个对象
                 */}
                {/* <Route path='/mine' children={(props) => {
                    // console.log('props', props)
                    if (props.match) {
                        return <Mine {...props} />
                    }
                    return null
                }
                }></Route> */}
                {/* 组件渲染方式5: */}
                <Route path='/mine' children={<Mine {...this.props}></Mine>}></Route>
            </>
        )
    }
}
export default withRouter(Index)